<template>
  <breadCrumb ref="breadCrumbRef" :item="item"></breadCrumb>
  <div class="table-wrapped">
    <div class="table-top">
      <div class="table-header">
        <div>
          <el-input v-model="account" class="w-50 m-2" size="large" placeHolder :prefix-icon="Search"
            @change="searchLoginAccount"  clearable @clear="getLoginLogByPager" ></el-input>
        </div>
        <div class="upload-wrapped">
          <el-button type="danger" @click="goClear">清空操作日志</el-button>
        </div>
      </div>
      <div class="table-content">
        <el-table :data="tableData">
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column prop="account" label="账号" />
          <el-table-column prop="name" label="名字" />
          <el-table-column prop="email" label="联系方式" />
          <el-table-column prop="login_time" label="登录时间" width="200">
            <template #default="{ row }">
              <div>{{ row.login_time?.slice(0, 16) }}</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="table-footer">
      <el-pagination :page-size="paginationData.PageSize" :current-page="paginationData.loginCurrentPage"
        :total="paginationData.loginTotal" layout="prev, pager, next" @current-change="changePage" />
    </div>
  </div>
  <tips ref="tipsRef"></tips>
</template>

<script lang="ts" setup>
import { ref, reactive, Ref } from 'vue'
import breadCrumb from '../../components/breadCrumb.vue'
import  tips from './components/tips.vue'
import { getLoginLogByPagerAPI, getRecentTenLoginLog, getLoginLogTotalAPI } from '../../api/login_log'
import { Search } from '@element-plus/icons-vue'

// 面包屑
const breadCrumbRef = ref()

// 面包屑参数
const item = ref({
  first: '登录日志',
})

interface tableData {
  account: number | null
  name: string
  email: string
  login_time: string
}

const account = ref()
// 搜索之后函数
const searchLoginAccount = async () => {
  const res = await getRecentTenLoginLog({ account: account.value })
  tableData.value = res.data.data
}


// 登录次数表格数据
const tableData = ref<tableData>()

// 分页数据
const paginationData = reactive({
  // 登录次数总数
  loginTotal: 1,
  // 登录次数列表当前所处页数
  loginCurrentPage: 1,
  PageSize: 10,
})


// 获取第一页登录日志
const getLoginLogByPager = async () => {
  paginationData.loginCurrentPage = 1
  const res = await getLoginLogByPagerAPI({ pager: paginationData.loginCurrentPage, })
  tableData.value = res.data.data
}

getLoginLogByPager()


// 获取登录日志总数
const getLoginLogTotal = async () => {
  const res = await getLoginLogTotalAPI()
  paginationData.loginTotal = res.data.data.length
}
getLoginLogTotal()


// 换页
const changePage = async (val: number) => {
  paginationData.loginCurrentPage = val
  const res = await getLoginLogByPagerAPI({ pager: paginationData.loginCurrentPage, })
  tableData.value = res.data.data
}


const tipsRef = ref()
const goClear = () => {
  tipsRef.value.open()
}

</script>

<style scoped lang="scss">
:deep(.el-table .cell) {
  font-weight: 400;
}

a {
  color: #fff;
  display: block;
  text-decoration: none;
}

.table-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.table-wrapped {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
</style>